import * as THREE from 'three';
import {tag} from '../tag3D.js'
const model = new THREE.Group();
const lineGroup = new THREE.Group();//边界线组
const meshGroup = new THREE.Group();//区域填充组
const cityPointGroup = new THREE.Group();//城市热点组
const extrudeGroup = new THREE.Group()
const cirMeshGroup = new THREE.Group()
const prismMeshGroup = new THREE.Group()

// const size = 1.2;
const mapHeight = 1
const loader = new THREE.FileLoader();
loader.setResponseType("json")
const gdpData = {}
// 解析gdp文件数据
loader.load('/gdp.json',(data)=>{
    data.arr.forEach((item)=>{
        gdpData[item.name] = item.value
    })
})
loader.load('/china2.json',(data)=>{
    data.features.forEach((area)=>{
        // coordinates数据分为单组和多组，将单组的封装为多组
        if(area.geometry.type === 'Polygon'){
            area.geometry.coordinates = [area.geometry.coordinates]
        }
        lineGroup.add(moreLine(area.geometry.coordinates,mapHeight)) 
        meshGroup.add(shapeMesh(area.geometry.coordinates,area.properties.name,area.properties.center))
        prismMeshGroup.add(prismMesh(area.properties.name,gdpData[area.properties.name],area.properties.center))
        if(area.properties.name === "河南"){
            // cityPointGroup.add(cityPointMesh(size,area.properties.cp[0],area.properties.cp[1]))
            // extrudeGroup.add(ExtrudeMesh(size,area.properties.cp[0],area.properties.cp[1]))
        }
    })
    // lineGroup.position.z += mapHeight + 0.01 *mapHeight
    console.log('meshGroup',meshGroup);
    model.add(lineGroup,meshGroup,cityPointGroup,extrudeGroup,cirMeshGroup,prismMeshGroup)
    console.log('model',model);
})

// 批量产生轮廓线
const moreLine = (coordinates,gdpvalue)=>{
    const groupLine = new THREE.Group();
    coordinates.forEach(polygon => {
        var pointArr = []
        polygon[0].forEach((elem)=>{
            pointArr.push(elem[0],elem[1],0)
        })
        groupLine.add(oneLine(pointArr))
    });
    groupLine.position.z += gdpvalue+ 0.001*gdpvalue
    return groupLine
}
// 产生一条轮廓线
const oneLine = (pointArr)=>{
    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array(pointArr);
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    const material = new THREE.LineBasicMaterial({
        color: 0x00cccc
    });
    const line = new THREE.LineLoop(geometry,material);
    return line;
}
// 产生多边形面
const shapeMesh = (coordinates,name,lngLat)=>{
    var heartShape = [];//轮廓形状Shape集合
    coordinates.forEach(polygon => {
        var pointArr = []
        polygon[0].forEach((elem)=>{
            pointArr.push(new THREE.Vector3(elem[0],elem[1],0))
        })
        const shape = new THREE.Shape(pointArr);
        heartShape.push(shape)
    });
    var material = new THREE.MeshLambertMaterial({
        color: 0x004444,
        // side: THREE.DoubleSide, //两面可见
    }); //材质对象
    var geometry = new THREE.ExtrudeGeometry( heartShape ,{
        depth: mapHeight, //拉伸长度
        bevelEnabled: false //无倒角
    });
    var mesh =  new THREE.Mesh( geometry, material )
    mesh.lngLat = lngLat
    mesh.name = name
    return mesh
}
// 产生愣住
const prismMesh = (name,value,lngLat)=>{
    if(!name){
        return
    }
    var color1 = new THREE.Color(0xffff00);
    var color2 = new THREE.Color(0xff0000);//最大数值对应柱子颜
    const maxGDP = 100000
    const GDPHeight = (value/maxGDP )*10
    const geometry = new THREE.CylinderGeometry( 0.5, 0.5, GDPHeight , 6 );
    geometry.computeVertexNormals()
    const material = new THREE.MeshLambertMaterial( {color: color1.clone().lerp(color2.clone(),value/maxGDP)} );
    const cylinder = new THREE.Mesh( geometry, material );
    cylinder.name = name
    cylinder.position.set(lngLat[0],lngLat[1],mapHeight + 0.01)
    cylinder.rotateX(Math.PI/2)
    cylinder.position.z += GDPHeight/2
    const label = tag(name)
    cylinder.add(label)
    // label.scale.set(0.04,0.04,0.04)
    label.position.y += GDPHeight/2
    console.log('',label);
    // label.position.x += GDPHeight/2
    return cylinder
}

function render() {
    extrudeGroup.traverse((obj)=>{
        if(obj.type === 'Mesh'){
            obj.rotation.z += 0.01
        }
    })
    cityPointGroup.traverse((obj)=>{
        if(obj.type === 'Mesh'){
            obj.scale.set(obj._s,obj._s,1)
            obj._s += 0.02
            // _s的值在2-3时，透明度在0-1之间变化，3-5时透明度在1-0之间变化
            if(obj._s < 3){
                obj.material.opacity = (obj._s - 2.0) * 1;
            }else if(obj._s<5 && obj._s >= 3){
                obj.material.opacity = 1 - (obj._s - 3) / 2;
            }else if(obj._s >= 5){
                obj._s = 2
            }

        }
    })   
    requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
    }
    render();
export {model,meshGroup,cirMeshGroup};